<template>
  <div style="padding: 15px 30px">
    <!-- <div class="flex-box">
      <div class="large-title">资产合铺申请</div>
      <div class="dropdown-box">
        <el-button type="primary" size="mini">退回</el-button>
        <el-button type="primary" size="mini">同意</el-button>
      </div>
    </div> -->
    <div class="pad-content-box padding-top-bottom-20">
      <form-common :filed-list="projectList" ref="form1"></form-common>
      <div class="font-size-16 font-weight-600 padding-top-bottom-20">变更前资产信息</div>
      <form-common :filed-list="assetBeforeList" ref="form2"></form-common>
      <div class="drawing-box flex">
        <div class="left-box">
          <img :src="assetBeforeUrl" class="cmd-pic" />
        </div>
        <div v-for="assets in assetBeforeSpaceList" :key="assets.priamryKey" class="flex margin-bottom-10 cursor-pointer drag-box" :style="[{ left: assets.positionX + 'px' }, { top: assets.positionY + 'px' }]">
          <i class="icon el-icon-location font-size-25" :class="setBgCalssName(assets.spaceType, assets.status)"></i>
          <div class="padding-right-10 margin-top-5">{{ assets.name }}</div>
        </div>
      </div>
      <div class="font-size-16 font-weight-600 padding-top-bottom-20">变更后资产信息</div>
      <form-common :filed-list="assetAfterList" ref="form3"></form-common>
      <div class="drawing-box flex">
        <div class="left-box">
          <img :src="assetAfterUrl" class="cmd-pic" />
        </div>
        <div v-for="assets in assetAfterSpaceList" :key="assets.priamryKey" class="flex margin-bottom-10 cursor-pointer drag-box" :style="[{ left: assets.positionX + 'px' }, { top: assets.positionY + 'px' }]">
          <i class="icon el-icon-location font-size-25" :class="setBgCalssName(assets.spaceType, assets.status)"></i>
          <div class="padding-right-10 margin-top-5">{{ assets.name }}</div>
        </div>
      </div>
      <div class="padding-top-20">变更原因：计划招租客户东道广告公司，因使用面积不足，需要拆除</div>
      <div class="padding-top-20">变更影响：预计年收入减少20万元</div>
    </div>
    <approve-info></approve-info>

  </div>
</template>
<script>
  import * as Form from './form.js';
  import approveInfo from './approveInfo.vue';
  import formCommon from '@g/components/form/formCommon.vue';

  export default {
    data() {
      return {
        projectList: Form.project,
        assetBeforeList: Form.assetBefore,
        assetAfterList: Form.assetAfter,
        assetBeforeUrl: 'https://chinavisionary-test.oss-cn-beijing.aliyuncs.com/4ac150bef2d6457daf977ce55d854509[-]1642759024740[-]bghas.jpeg',
        assetBeforeSpaceList: [
          {
            positionX: 431,
            positionY: 393,
            name: 301,
            spaceType: 'shop',
            status: 1,
          },
          {
            positionX: 310,
            positionY: 202,
            name: 302,
            spaceType: 'shop',
            status: 1,
          },
          {
            positionX: 548,
            positionY: 174,
            name: 303,
            spaceType: 'shop',
            status: 1,
          },
          {
            positionX: 710,
            positionY: 207,
            name: 304,
            spaceType: 'shop',
            status: 2,
          },
          {
            positionX: 698,
            positionY: 384,
            name: 305,
            spaceType: 'shop',
            status: 2,
          },
        ],
        assetAfterUrl: 'https://chinavisionary-test.oss-cn-beijing.aliyuncs.com/4ac150bef2d6457daf977ce55d854509[-]1642759309389[-]bgno.jpeg',
        assetAfterSpaceList: [
          {
            positionX: 431,
            positionY: 393,
            name: 301,
            spaceType: 'shop',
            status: 1,
          },
          {
            positionX: 310,
            positionY: 202,
            name: 302,
            spaceType: 'shop',
            status: 1,
          },
          {
            positionX: 548,
            positionY: 174,
            name: 303,
            spaceType: 'shop',
            status: 1,
          },
          {
            positionX: 700,
            positionY: 289,
            name: '304A',
            spaceType: 'shop',
            status: 1,
          },
        ],
      };
    },
    mounted() {},
    methods: {
      //设置点位类型背景色
      setBgCalssName(type, operateAction) {
        switch (type) {
          case 'shop':
            if (operateAction == 2) {
              return 'bg-ccc';
            } else {
              return 'bg-blue';
            }
        }
      },
    },
    components: { formCommon,approveInfo },
  };
</script>
<style scoped lang="scss">
  .flex-box {
    height: 50px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;

    justify-content: space-between;
    .large-title {
      font-size: 18px;
    }
  }
  .form-common {
    margin-left: -10px;
  }
  .drawing-box {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    .left-box {
      width: 1100px;
      .cmd-pic {
        width: 100%;
        pointer-events: none;
      }
    }
    .drag-box {
      position: absolute;
    }
  }
  .bg-blue {
    color: rgb(9, 9, 233) !important;
  }
  .bg-ccc {
    color: #cccccc !important;
  }
</style>
